<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useUserStore } from '/@/stores/modules/user';
import queryUserServiceApi from '/@/api/base/query/query-user';
import { UserEditUrl, UserAddUrl } from '/@/views/org/mapping.json';
import { jumpPath } from '/@/utils/router-kit';
import { JxtechPageTableColumn } from '@whjxtech/jxtech-component';

const props = defineProps({
  queryParam: Object,
  tableHeight: Number,
});

const UserListTableRef = ref();
const userStore = useUserStore();

const UserTableState = reactive({
  /**查询参数 */
  queryParam: { likeAll: null, id: userStore.orgId, subOrgId: userStore.subOrgId },
  /**
   * 表格选中的数据主键
   */
  selectionPkList: [] as string[],
  /**
   * 表格选中的数据
   */
  selectionListData: [] as any[],
  /**
   * 表格的列配置
   */
  tableColumn: [
    { label: '序号', width: '50', type: 'selection' },
    { label: '序号', width: '50', type: 'index' },
    { prop: 'userAccount', label: '用户账号' },
    { prop: 'userFullname', label: '用户名称' },
    { prop: 'unitCode', label: '部门编码' },
    { prop: 'unitName', label: '部门名称' },
  ] as JxtechPageTableColumn[],
  /**
   * 表格数据加载的方法
   */
  loadData: (params: any) =>
    queryUserServiceApi.queryPage(
      { queryName: 'queryUsersByUnit', refCols: 'default' },
      { ...props.queryParam, ...params, ...UserTableState.queryParam }
    ),
  /**
   * 表格导出excel的方法
   */
  expData: (params: any) =>
    queryUserServiceApi.exportData(
      { queryName: 'queryUsersByUnit', refCols: 'default' },
      { ...props.queryParam, ...params, ...UserTableState.queryParam }
    ),
  /**
   * 表格选中事件
   */
  tableSelectionChange: (dataList: any[], pkList: string[]) => {
    UserTableState.selectionListData = dataList;
    UserTableState.selectionPkList = pkList;
  },
  //新增数据方法
  onAddButtonClick: () => {
    jumpPath(UserAddUrl, { unitId: props.queryParam?.unitId });
  },
  /**
   * 表格删除事件
   */
  deleteTableData: () => {
    //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
    //deletePageTableSelectionDataList(UserListTableRef, dictionaryTypeApi);
  },

  /**
   * 查询事件
   */
  handleSearch: () => UserListTableRef.value.loadTable(),
});

defineExpose({
  getUserListTableRef: () => UserListTableRef.value,
  onDeleteButtonClick: () => UserTableState.deleteTableData(),
  onAddButtonClick: () => UserTableState.onAddButtonClick(),
  selectionPkList: () => UserTableState.selectionPkList,
  selectionListData: () => UserTableState.selectionListData,
});
</script>
<template>
  <jxtech-basic-card>
    <template #operationSpace>
      <jxtech-search-input
        tips="用户账号/用户名称"
        v-model="UserTableState.queryParam.likeAll"
        @search="UserTableState.handleSearch"
      >
      </jxtech-search-input>
    </template>
    <JxtechPageTableExt
      ref="UserListTableRef"
      row-key="userId"
      table-height="calc(100vh - 190px)"
      :table-column="UserTableState.tableColumn"
      :load-data="UserTableState.loadData"
      :exp-data="UserTableState.expData"
      @selection-change="UserTableState.tableSelectionChange"
      :tableHeight="props.tableHeight"
    >
    </JxtechPageTableExt>
  </jxtech-basic-card>
</template>
<style>
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: var(--el-checkbox-checked-bg-color);
  border-color: var(--el-checkbox-checked-input-border-color);
}
</style>
